<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位原理剖析</title>
    <style>
        body{margin:0;border:3px solid red; height: 600px;position: relative}
        div{margin:10px;}

        #father{border:3px solid #000; position: relative}
        .son01,.son02,.son03{height:50px;text-align: center;line-height:50px;font-size:28px;font-weight: bold;color:#fff;}
        .son01{border:3px dashed #f00;background:#f2bb6f;position: absolute;bottom: 0px; right: 0px}
        .son02{border:3px dashed yellow;background:#003580;}
        .son03{border:3px dashed greenyellow;background:#369; }
    </style>
</head>
<body>
<div id="father">
    <div class="son01">我是第一个盒子</div>
    <div class="son02">我是第二个盒子</div>
    <div class="son03">我是第三个盒子</div>
</div>
</body>
</html>
  <!-- 其中body是爷爷 <div class="fathre"> 是爸爸  son都是儿子， 做绝对定位，如果son想在爸爸身体里定位那么要把爸爸先定位，因为是祖先，爷爷不定位
    儿子会主动跑到爸爸那里，如果想在爷爷身体里面定位就把爷爷先定位，如果爸爸没有定位就会跑到爷爷那里，如果爸爸和爷爷都定位了，会出现就近原则
    跑到爸爸那里去-->